<template>
  <div class="style_form">
    <el-collapse :modelValue="activeId" accordion>
      <el-collapse-item
        v-for="(item, index) in canvasPage"
        :title="`${index + 1}、${item.type}`"
        :name="item.id"
      >
        <component :is="activeComponent(item.type || '')" :compData="item" />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script setup lang="ts">
import { markRaw, ref, computed } from 'vue'
import { useCanvasStore } from '@/store/modules/canvasStore'
import FontForm from './StyleDataForm/FontForm.vue'
import RectFrom from './StyleDataForm/RectFrom.vue'
const canvasStore = useCanvasStore()

const canvasPage = computed(() => {
  return canvasStore.canvasPage
})
const activeId = computed(() => {
  return canvasStore.activeId
})
// 所有选择插件和组件的对应列表
const compList = ref([
  {
    type: 'Font',
    comp: markRaw(FontForm),
  },
  {
    type: 'Rect',
    comp: markRaw(RectFrom),
  },
])

// 当前选中数据对象所对应的组件
const activeComponent = (type: string) => {
  let activeComp = compList.value.find((item) => item.type == type)
  if (activeComp) {
    return activeComp.comp
  }
  return
}
</script>
<style lang="scss" scoped>
.style_form {
  box-sizing: border-box;
  padding: 10px;
  min-width: 300px;
  width: 300px;
  height: $mainHeight;
  background-color: #fff;
  overflow-y: scroll;
  box-shadow: -10px 0 10px -10px #c7c7c7;
}
</style>
